import {designComponent, designPage, reactive} from 'plain-design-composition';
import React from 'react';
import './DemoTransition.scss';
import {DemoRow} from "../../Demo/DemoRow";
import {Button, ButtonGroup, Input, Transition} from "../../../../packages";
import {getComponentCls} from "../../../../packages/utils/getComponentCls";

const A = designComponent({
  setup() {
    return {
      render: () => (
        <div>
          111
        </div>
      )
    };
  },
});
// console.log(A.name, typeof A);

export default designPage(() => {
  const state = reactive({
    show: true,
  });
  return () => (
    <div>
      {/*<A/>*/}
      <DemoRow title={'基本用法'}>
        <Button label={'switch'} onClick={() => state.show = !state.show}/>
        <br/>
        <br/>
        <Transition switch name={'demo-fade'}>
          <Button onClick={() => state.show = !state.show} key={state.show ? 'show' : 'hide'}>
            {state.show ? "Hello, world!" : "Goodbye, world!"}
          </Button>
        </Transition>
      </DemoRow>
      <DemoRow title={'预定义内置的动画'}>
        <div>
          <Button label={'scale'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls("transition-scale")}>
            {state.show ? (
              <Button label={'on'} type="primary" key={'on'}/>
            ) : (
              <Button label={'off'} type="primary" danger key={'off'}/>
            )}
          </Transition>
        </div>
        <br/>
        <div>
          <Button label={'scale-y'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls('transition-scale-y')}>
            {state.show ? (
              <Button label={'on'} type="primary" key={'on'}/>
            ) : (
              <Button label={'off'} type="primary" danger key={'off'}/>
            )}
          </Transition>
        </div>
        <br/>
        <div>
          <Button label={'fade'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls('transition-fade')}>
            {state.show ? (
              <Button label={'on'} type="primary" key={'on'}/>
            ) : (
              <Button label={'off'} type="primary" danger key={'off'}/>
            )}
          </Transition>
        </div>
        <br/>
        <div data-direction="horizontal">
          <Button label={'slide prev (horizontal)'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls('transition-slide-prev')}>
            {state.show ? (
              <Button label={'on'} status={'success'} key={'on'} {...{ ['data-direction']: 'horizontal' } as any}/>
            ) : (
              <Button label={'off'} status={'error'} key={'off'} {...{ ['data-direction']: 'horizontal' } as any}/>
            )}
          </Transition>
        </div>
        <br/>
        <div>
          <Button label={'slide next (horizontal)'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls('transition-slide-next')}>
            {state.show ? (
              <Button label={'on'} status={'success'} key={'on'} {...{ ['data-direction']: 'horizontal' } as any}/>
            ) : (
              <Button label={'off'} status={'error'} key={'off'} {...{ ['data-direction']: 'horizontal' } as any}/>
            )}
          </Transition>
        </div>
        <br/>
        <div>
          <Button label={'slide prev (vertical)'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls('transition-slide-prev')}>
            {state.show ? (
              <Button label={'on'} status={'success'} key={'on'} {...{ ['data-direction']: 'vertical' } as any}/>
            ) : (
              <Button label={'off'} status={'error'} key={'off'} {...{ ['data-direction']: 'vertical' } as any}/>
            )}
          </Transition>
        </div>
        <br/>
        <div>
          <Button label={'slide next (vertical)'} onClick={() => state.show = !state.show}/>
          &nbsp;&nbsp;
          <Transition switch name={getComponentCls('transition-slide-next')}>
            {state.show ? (
              <Button label={'on'} status={'success'} key={'on'} {...{ ['data-direction']: 'vertical' } as any}/>
            ) : (
              <Button label={'off'} status={'error'} key={'off'} {...{ ['data-direction']: 'vertical' } as any}/>
            )}
          </Transition>
        </div>
      </DemoRow>
      <DemoRow title={'v-if transition'}>
        <ButtonGroup>
          <Button label={state.show ? 'show' : 'hide'} onClick={() => state.show = !state.show}/>
          <Transition name={getComponentCls('transition-scale-y')} unmount show={state.show}>
            <Input/>
          </Transition>
          <Button label={'next content'}/>
        </ButtonGroup>
      </DemoRow>
      <DemoRow title={'v-show transition'}>
        <ButtonGroup>
          <Button label={state.show ? 'show' : 'hide'} onClick={() => state.show = !state.show}/>
          <Transition name={'demo-disappear'} show={state.show}>
            <Input/>
          </Transition>
          <Button label={'next content'}/>
        </ButtonGroup>
      </DemoRow>
    </div>
  );
});
